Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Deck.gl Layers and Utility Support for vue-maplibre-gl #106

Open
wants to merge 29 commits into
base: master
Choose a base branch
from

Conversation

MostafaGamalSayed
Copy link

Summary of Changes

This pull request enhances the package with the following additions:

  1. New Components for Deck.gl Layers:

    • Added MglDeckGeojsonLayer component to integrate Deck.gl's GeoJsonLayer (@commit:43bab18a).
    • Added MglDeckArcLayer component to integrate Deck.gl's ArcLayer (@commit:2dba67d3).
  2. Core Composable for Layer Management:

    • Introduced useDeckLayer composable to handle lifecycle and reactivity for Deck.gl layers within Maplibre (@commit:462eb07f).
  3. Utility and Prop Configuration:

    • Added deck.layer.lib.ts, which defines common and layer-specific props with utilities for Deck.gl layers, ensuring reusable, type-safe layer configurations (@commit:9503c64c).
  4. New Dependencies:

    • Added Deck.gl-related packages (@deck.gl/core, @deck.gl/layers, @deck.gl/mapbox) to the project (package.json updates) (@commit:b0b75cca).

Features

  • New Deck.gl Layers: Support for ArcLayer and GeoJsonLayer, integrated as reusable Vue components.
  • Dynamic Tooltip Support: Enables reactive tooltips for layers using getTooltip functionality.
  • Interactive Map Layers: Allows developers to add, update, and remove custom Deck.gl layers easily.
  • Composable Architecture: Simplifies usage of Deck.gl layers with Maplibre in Vue projects.

Motivation

The goal of these changes is to expand the functionality of the @indoorequal/vue-maplibre-gl package by introducing seamless integration with Deck.gl layers. These enhancements bring extended interactivity, 3D visualization, and customization options for applications using the library. The composable and utility-driven design ensures easier implementation and extension of Deck.gl layers within Vue projects.

Future Plans

This is just the beginning of integrating Deck.gl into the @indoorequal/vue-maplibre-gl package. Over time, the implementation will be extended to include support for all available Deck.gl layers, ensuring the package becomes a comprehensive solution for Deck.gl and Maplibre users. Future layers to be added include ScatterplotLayer, IconLayer, BitmapLayer, and many more.

Testing

  • The changes have been tested with dynamic datasets for both ArcLayer and GeoJsonLayer.
  • Verified layer interactivity, tooltip rendering, and reactivity under different map states

@francois2metz
Copy link
Member

Hi,

Thanks for your contribution. This add interesting new features. I don't know if it should be integrated to the default package, as it make the library bigger. This is something to look at.
Could you rebase your branch and make sure that the command yarn build? I was not able to build it locally.
Also one or two examples would be nice.

@MostafaGamalSayed
Copy link
Author

Hi,

Thanks for the feedback! I’ve addressed the requested changes:

  • Rebased the branch against the latest main branch of the repo.

  • Verified that the build works correctly using yarn build (fixed any issues encountered during the process).

  • Added examples for the new layers:

    • Example for MglDeckArcLayer demonstrating its usage with dynamic data and tooltips.
    • Example for MglDeckGeojsonLayer showcasing its integration with Maplibre.
  • Updated documentation to link to the examples.

Let me know if there’s anything else you’d like me to adjust!

yarn.lock Outdated Show resolved Hide resolved
@francois2metz
Copy link
Member

Hi,

Could rebase your branch against the master branch and not create merge commits? This way we'll clean the history and enable the build check.

@MostafaGamalSayed
Copy link
Author

Hi,

I've rebased my branch against the latest master and force-pushed the changes as requested. The commit history is now clean, with no merge commits.

Please let me know if there is anything else you'd like me to do. Thank you for your feedback and guidance!

@francois2metz
Copy link
Member

francois2metz commented Dec 26, 2024

Hi,

Thanks for the rebase!

I tried to run the examples. You may want to add the magic comments at the top of the file to have a title and the description of the example (look at the others ones).

Not sure why, but it seems that the deck.gl layers are not correctly binded with maplibre zoom and viewport. Look at the video

recording.mp4

@MostafaGamalSayed
Copy link
Author

Hi,
Thank you for the feedback! I’ve made some updates based on your suggestions:

  • Magic Comments: I’ve added the magic comments (title and description) to the top of the example files to make them consistent with the others in the project.
  • ScatterplotLayer Example: After reviewing the issue, I found that the previous example didn’t handle the Deck.gl bindings with Maplibre’s zoom and viewport correctly. I’ve replaced it with a different example that resolves this issue and works as expected.
  • Other Layers: For the ArcLayer and GeoJsonLayer examples, I’ve tested them again, and they seem to work properly with Maplibre's zoom and viewport. If you’re still seeing issues, please let me know, and I can investigate further.

I’ve pushed the changes—please let me know if there’s anything else I should adjust!
Thank you for all your help and guidance.

@francois2metz
Copy link
Member

Hi, the examples are still working for me. Did you forget to push a change?

@MostafaGamalSayed
Copy link
Author

Hi,

To clarify, I only made changes to the ScatterplotLayer example in the file deck-scatteredplot-layer.vue since it was the only example that had issues with Deck.gl bindings to Maplibre (zoom and viewport). The problem in this example has been resolved, and I’ve replaced it with a working version.
As for the other examples—deck-geojson-layer.vue and deck-arc-layer.vue—they were already working correctly without any issues, so I didn’t make any changes to them. I’ve tested these examples again, and they produce the same output as shown in the official Deck.gl documentation.

If there’s a specific issue you’re encountering with any of the examples, please let me know, and I’ll be happy to investigate further!

@francois2metz
Copy link
Member

Hi,

I have the same zoom problem with the scatterplot and the 2 other examples.

recording.mp4

@MostafaGamalSayed
Copy link
Author

Hi,

I’ve worked on the zoom issue and fixed it now in all three examples (ScatterplotLayer, GeojsonLayer, and ArcLayer) in commit 79baaa57.

The issue was caused by missing styles for MapLibre GL, which led to improper rendering and interaction with the map at certain zoom levels. I’ve now imported the relevant MapLibre GL default styles in all the examples, which resolves the problem. Additionally, I adjusted the map’s height to make the examples more consistent and visually clear.

Please let me know if you encounter any further issues with the examples!

@francois2metz
Copy link
Member

Hi,

Much better indeed!

type Accessor,
type Material,
} from "@deck.gl/core";
import type { MjolnirEvent } from "mjolnir.js";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It shouldn't a dependency? Or is it possible to use another type?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mjolnir.js is an indirect dependency, it is installed as part of the dependency tree of Deck.gl.
see this

@francois2metz francois2metz changed the title Add Deck.gl Layers and Utility Support for vue-maplibre-gL Add Deck.gl Layers and Utility Support for vue-maplibre-gl Dec 28, 2024
@MostafaGamalSayed
Copy link
Author

Hi @francois2metz ,

I just wanted to follow up on my pull request as I haven’t received any feedback in a while. Please let me know if there are any additional changes needed from my side or if there are concerns about merging the PR.

Thank you for your time.

….gl layers

- Defined common `baseLayerProps` and layer-specific props (`arcProps`, `geojsonProps`) for Deck.gl layers.
- Added type-safe support for interactivity, styling, 3D features, and extensions.
- Introduced `genDeckLayerOpts` utility for sanitizing layer configurations.
- Added `useDeckLayer` composable to integrate Deck.gl layers.
- Supports `getTooltip` and manages layer lifecycle with Vue's reactivity.
…x integration

- Added `@deck.gl/core`, `@deck.gl/layers`, and `@deck.gl/mapbox` dependencies.
- Implemented `MglDeckArcLayer` Vue component using Deck.gl's `ArcLayer`.
- Included support for dynamic tooltips, prop validation, and layer configuration.
…tion

- Implemented `MglDeckGeojsonLayer` Vue component using Deck.gl's `GeojsonLayer`.
- Included support for dynamic tooltips, prop validation, and layer configuration.
Revised the TooltipContent type to support a more flexible structure, allowing text, HTML, className, and style properties. This change enables enhanced customization for tooltips in deck.layer.lib.ts.
Simplify the tooltip initialization by directly assigning a conditional function or undefined. This improves code readability and reduces unnecessary object spread usage.
This change adds '@deck.gl/core', '@deck.gl/layers', and '@deck.gl/mapbox' to the SSR external dependencies in the Vite configuration. It ensures proper handling of these libraries during the build process and avoids bundling them unnecessarily. Additionally, global variables for these dependencies were defined to maintain compatibility.
MostafaGamalSayed and others added 21 commits January 12, 2025 10:59
This commit introduces exports for `MglDeckGeojsonLayer` and `MglDeckArcLayer` from the `deck-layers` directory. This ensures that these layers are available for use in other parts of the application.
Introduce a new example file showcasing the usage of `MglDeckGeojsonLayer` in a Vue component. This includes rendering GeoJSON data with custom properties like elevation, colors, and tooltips, enhancing the documentation's examples.
Add a new example file to demonstrate the use of `MglDeckArcLayer` in Vue. The example outlines the usage of different properties including source color, position and tooltips while rendering JSON data. This enhances the comprehensiveness of our documentation.
Introduced new properties for line and scatterplot layers, enabling more control over their configurations. Consolidated the `getTooltip` property into `baseLayerProps` for improved reusability across layers. Removed redundant `getTooltip` declarations from specific layer props.
Introduced `MglDeckLineLayer` and `MglDeckScatteredPlotLayer` components to support additional deck.gl layer types. Updated the index file to export the new components for seamless integration.
This example demonstrates a Deck.GL scatterplot integration in Vue with gender-specific colors and configurable radius. It provides a visualization of people in Manhattan using sample data.
Corrected the header comment to accurately describe the Geojson layer instead of incorrectly referencing the Arc layer. Ensures the documentation aligns with the file's purpose.
…ple and replace the ScatteredPlot layer example

Added the magic comments (title and description) to the top of the example files to make them consistent with the others in the project. Also, I replaced the ScatteredPlot layer example with another one.
Enhances the deck layer component by introducing an `updateTrigger` prop, allowing fine-grained control over layer updates.
Changed map height to 500px and ensured consistent styling across `deck-scatteredplot-layer.vue`, `deck-arc-layer.vue`, and `deck-geojson-layer.vue`. Included the MapLibre GL CSS file to fix missing styles issue.
Updated links in the documentation comments for Deck.gl layers to include more descriptive anchor text (Markdown).
Introduce a new example demonstrating the use of Deck.gl Line and Scattered Plot layers in Vue with MapLibre. The example visualizes flight paths and airports, showcasing dynamic tooltips, custom styling, and interactive features.
Remove unused imports and redundant type definitions, streamline tooltip logic, and destructure initial view state for cleaner syntax.
Introduce the `MglDeckPolygonLayer` component to support Deck.gl's Polygon Layer in the library. The example demonstrates its usage with MapLibre GL, including rendering polygons with tooltip and style customization options.
Updated the import statement to omit the `.ts` file extension for consistency with other imports and potential compatibility improvements. This change ensures adherence to standard conventions in the project.
Introduced `polygonProps` and `polygonPropsKeys` to define and manage properties specific to polygon layers.
Adjusted global export names for Deck.gl modules to align with updated naming conventions. This ensures compatibility and resolves potential issues with external integrations.
The @deck.gl/core, @deck.gl/layers, and @deck.gl/mapbox packages were relocated from devDependencies to peerDependencies. This ensures compatibility management is handled by consumers of the package.
Added peer dependencies for @deck.gl/core, @deck.gl/layers, and @deck.gl/mapbox with version ^9.0.35. This ensures compatibility with the required modules for the project.
Bumped versions for multiple Deck.gl, Loaders.gl, Luma.gl, Math.gl, MJOLNIR.js, and associated peer and dev dependencies in `yarn.lock` and `package.json`. These updates ensure compatibility and align with the latest package improvements.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants